<template>
  <div class="overview">
    <div class="title">Overview</div>
    <div class="fit row col justify-center items-center text-sub">
      <h4>Comming Soon</h4>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import Video from 'src/models/Video';
import Audio from 'src/models/Audio';
import { useUserStore } from 'src/stores/user-store';
const userStore = useUserStore();
const currentUser = computed(() => userStore.currentUser);
const myVideos = computed(() => userStore.myVideos);
const myAudios = computed(() => userStore.myAudios);
const recentVideo = ref<Video | null>(null);
const recentAudio = ref<Audio | null>(null);
onMounted(async () => {
  await userStore.getMyVideos({ page: 1, size: 6 });
  await userStore.getMyAudios({ page: 1, size: 6 });
  if (myVideos.value) {
    if (myVideos.value.length > 0) {
      recentVideo.value = myVideos.value[0];
    }
  }
  if (myAudios.value) {
    if (myAudios.value.length > 0) {
      recentAudio.value = myAudios.value[0];
    }
  }
});
</script>
<style lang="sass" scoped>

.overview
  width: 100%
  height: calc(100vh - 104px)
  .title
    font-size: 22px
</style>
